<template>
    <div class="hot-recom">
        <h1 class='hot-title'>热门榜单</h1>
        <div class="hot-city" v-for="(item,index) of hotList" :key="index">
            <div class="hot-img">
                <img class="hot-image" :src="item.imgUrl" alt=""> 
            </div>
            <div class="hot-city-name">
                <h3 class="hot-site">{{item.hotName}}</h3>
                <p class="hot-comment">{{item.commentNum}}条评论</p>
                <a href="#" class="hot-detail">查看详情</a>
            </div>
        </div>
    </div>
</template>
<script>


export default {
    name:'HotRecommend',
    props:{
        hotList:Array
    },
    data()
    {
        return{
           
        }
    }
}
</script>
<style lang="stylus" scoped>
    .hot-recom
        margin-top:.5rem
        min-height:0
        overflow :auto
        .hot-title
            font-size :.38rem
            text-align :center
            margin:.2rem 0
        .hot-city
            width:100%
            height:2.5rem
            margin-top:.2rem
            display :flex
            border-bottom:.01rem solid #eee
            .hot-img
                overflow :hidden
                width :2rem
                height:2rem
                float :left
                margin:.25rem .2rem
                .hot-image
                    width:100%
            .hot-city-name
                overflow :hidden
                flex :1
                height:1.4rem
                float :left
                margin:.25rem 0
                padding:.3rem 0
                .hot-site
                    font-size :.32rem
                    margin-bottom :.2rem
                .hot-comment
                     font-size:.21rem
                     margin-bottom :.2rem
                .hot-detail
                    font-size :.3rem
                    color:#ff8300
</style>
